<div class="content">
    <div class="row">
        <div class="col-md-12">
            <custom-tab tab-item-list="tabItemList">

            </custom-tab>
            <div class="portlet-header " style="margin-top: 10px">
                <div class="operation-btn pull-left">
                    <a href="javascript:;" class="btn blue" ng-click="deploy()">配置</a>
                </div>
                <div class="operation-btn pull-right">
                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <div class="input-group" date-time-append style="position: static">
                                <input class="form-control input-radius" name="date" id="date"
                                       style="cursor: pointer;background-color: #fff;width:124px"
                                       ng-model="model.startTime"
                                       date-time max-view="year" min-view="date" view="date"
                                       auto-close="false"
                                       format="YYYY-MM-DD"
                                       placeholder="请选择日期"
                                       ng-value="show"
                                       readonly/>
                                <span class="input-group-btn">
                                        <button class="btn default button-radius" type="button">
                                            <i class="fa fa-calendar"></i>
                                        </button>
                                    </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <select name="city"
                                    class="select2-container form-control ng-isolate-scope ng-pristine ng-valid"
                                    data-placeholder="请选择城市"
                                    ng-model="model.deviceType" select2 style="min-width: 200px;">
                                <option ng-repeat="area in range" value="{{area.key}}"
                                        ng-bind="area.text"></option>
                            </select>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="请输入关键字" ng-model="condition.search">
                        </div>
                        <a href="javascript:;" class="btn blue" ng-click="search()">查询</a>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3" >
                    <p style="text-align: center;font-size: 18px;font-weight: bold">重要活动保障</p>
                    <div class="importantActivity1" style="width: 350px;height: 170px;border: 1px dotted #000;margin-bottom: 15px;">
                        <div class="head" style="margin-top: 10px;">
                            <span style="padding:10px;font-size: 12px;">最近三日AQI</span>
                        </div>
                        <div class="body" style="text-align: center;padding: 20px 0 10px 0">
                            <span style="font-size: 22px;font-weight:bold;color: #68FFE5">50</span>
                            <span style="font-size: 22px;font-weight:bold;color: #000000">-</span>
                            <span style="font-size: 22px;font-weight:bold;color: #FFFF33">80</span>
                            <span style="font-size: 22px;font-weight:bold;color: #FFFF33">100</span>
                            <span style="font-size: 22px;font-weight:bold;color: #000000">-</span>
                            <span style="font-size: 22px;font-weight:bold;color: #E09673">130</span>
                            <span style="font-size: 22px;font-weight:bold;color: #FFFF33">80</span>
                            <span style="font-size: 22px;font-weight:bold;color: #000000">-</span>
                            <span style="font-size: 22px;font-weight:bold;color: #E09673">110</span>
                        </div>
                        <div style="text-align: center">
                            <span  class="btn" style="background-color: #0078B8;color:#ffffff;width: 60px;height: 30px;line-height:15px;margin-right: 20px">O3</span>
                            <span  class="btn" style="background-color: #0078B8;color:#ffffff;width: 60px;height: 30px;line-height:15px;margin-right: 20px">O3</span>
                            <span  class="btn" style="background-color: #0078B8;color:#ffffff;width: 60px;height: 30px;line-height: 30px;line-height:15px;">O3</span>
                        </div>

                    </div>
                    <div class="importantActivity2" style="width: 350px;height: 170px;border: 1px dotted #000;margin-bottom: 15px;">
                        <div class="head" style="margin-top: 10px;">
                            <span style="padding:10px;font-size: 12px;">三日AQI趋势预测</span>
                        </div>
                        <div class="body" style="text-align: center;padding: 10px 0 10px 20px">
                            <span style="display:inline-block;width: 30px;height: 15px;line-height:15px;margin-right: 50px">80</span>
                            <span style="display:inline-block;width: 30px;height: 15px;line-height:15px;margin-right: 50px">110</span>
                            <span style="display:inline-block;width: 30px;height: 15px;margin-right: 50px">130</span>
                            <span style="display:inline-block;width: 30px;height: 30px;background-color:#DFDF00;margin-right: 50px"></span>
                            <span style="display:inline-block;width: 30px;height: 30px;background-color:#DF6E00;margin-right: 50px"></span>
                            <span style="display:inline-block;width: 30px;height: 30px;background-color:#DF6E00;margin-right: 50px"></span>
                            <span style="display:inline-block;width: 30px;height: 30px;background-color:#00C700;margin-right: 50px"></span>
                            <span style="display:inline-block;width: 30px;height: 30px;background-color:#DFDF00;margin-right: 50px"></span>
                            <span style="display:inline-block;width: 30px;height: 30px;background-color:#DFDF00;margin-right: 50px"></span>
                            <span style="display:inline-block;width: 30px;height: 15px;line-height:15px;margin-right: 50px">50</span>
                            <span style="display:inline-block;width: 30px;height: 15px;line-height:15px;margin-right: 50px">80</span>
                            <span style="display:inline-block;width: 30px;height: 15px;line-height:15px;margin-right: 50px">100</span>
                        </div>
                    </div>
                    <div style="width: 390px;height: 220px;" id="importantActivityLine">
                        <hour-line
                                id="hourLineId"
                                data="hourLineData"
                        ></hour-line>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="col-sm-9" style="width: 900px;height: 300px;margin: 15px" id="dayChangeRugular">
                        <day-line
                                id="dayLineId"
                                data="dayLineData"
                        ></day-line>
                    </div>
                    <div class="col-sm-9" style="width: 900px;height: 300px;margin: 15px" id="weekChangeRugular">
                        <week-line
                                id="weekLineId"
                                data="weekLineData"
                        ></week-line>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

